<template>
  <div>
    <el-row style="margin-bottom:15px">
      <el-button type="primary" icon="el-icon-plus" @click="nav('/user/userAdd')">添加用户</el-button>
    </el-row>
    <el-table :data="list" border height="500" size="medium" class="table">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="userId" label="编号" align="center"></el-table-column>
      <el-table-column prop="head" label="头像" align="center">
        <template slot-scope="scope">
          <el-avatar shape="circle" :src="scope.row.img"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center"></el-table-column>
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="userPsw" label="密码" align="center"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="e">
          <el-button size="mini" type="danger" @click="del(e)" icon="el-icon-delete">删除</el-button>
          <el-button size="mini" type="primary" @click="edit(e)" icon="el-icon-edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getData();
    let tab=[{name:'用户列表',path:'user'}];
    //this.$store.commit('_setTab',tab);
  },
  methods: {
    nav(path) {
      this.$router.push({
        path:path
      });
    },
    getData() {
      this.$api.userList({}).then((ret) => {
        console.log(ret)
        this.list = ret.data
      })
    },
    edit(e) {
      console.log(e);
      let id=e.row.id;
      this.$router.push({
        path:'userEdit',
        query:{
          id:id
        }
      });
    },
    del(e) {
      console.log(e)
      let index = e.$index;
      let id = e.row.id;
      this.$confirm('是否删除该用户？','提示',{
        confirmButtonText:'删除',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() => {
        this.$api.delUser({id:id}).then((res) => {
          this.list.splice(index,1)
          this.$com.toast("删除成功！")
        })
      });
    },
    add() {
      let _this = this;
      this.$api.post('user/userAdd',{
        userName:'帅小黑',
        userPsw: '123456',
        userPhone: '15716022393'
      },function(ret) {
        _this.getData();
      })
    }
  }
}
</script>